<template>
  <div class="fullscreen">
    <el-icon class="icon" @click="onScreenfullClick"><FullScreen /></el-icon>
  </div>
</template>

<script setup lang="ts">
import screenfull from 'screenfull'
const isFullscreen = ref(false)
// 全屏点击时
const onScreenfullClick = () => {
  if (!screenfull.isEnabled) {
    ElMessage.warning('暂不不支持全屏')
    return false
  }
  screenfull.toggle()
  screenfull.on('change', () => {
    if (screenfull.isFullscreen) isFullscreen.value = true
    else isFullscreen.value = false
  })
}
</script>
<style scoped lang="scss">
.fullscreen {
  margin-right: 20px;
  cursor: pointer;
  &:hover {
    .icon {
      animation: iconAnimation 0.3s ease-in-out;
    }
  }
}
</style>
